<template>
  <div class="twoBox">
    <div class="activityData" >
      <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="100px">
        <el-form-item label="" prop="keyword">
          <el-input v-model="queryParams.keyword" placeholder="手机号、姓名、奖项名称" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="中奖类型：" prop="recordType">
          <el-select v-model="queryParams.recordType" placeholder="请选择">
            <el-option v-for="item in recordTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="btnBox">
        <el-button type="primary" size="small" @click="add">添加</el-button>
        <el-upload class="upload-demo" :action="fileaction" :headers="headers" :data="fileData" :limit="10"
            :on-success="handleFileChange" :show-file-list="true" :file-list="fileList">
            <el-button type="primary" size="small">导入</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </div>
      <el-table :data="jackpotList" border style="width: 100%;margin-top:14px" >
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column prop="stageName" align="center" label="阶段" />
        <el-table-column prop="name" align="center" label="奖项名称" />
        <el-table-column prop="customerPhone" align="center" label="手机号" />
        <el-table-column prop="customerName" align="center" label="姓名" />
        <el-table-column prop="date" align="center" label="用户类型"  :formatter="handleCustomerType"/>
        <el-table-column prop="date" align="center" label="中奖类型"  :formatter="handleRecordType"/>
        <el-table-column prop="date" align="center" label="操作">
            <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDelete(scope.row.id)" v-if="scope.row.customerType == 1 && scope.row.jackpotStatus == 1">删除</el-button>
            <el-button size="mini" type="text" @click="handleEdit(scope.row)" v-if="scope.row.customerType == 1 ">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-sizes="[10, 20, 30, 50,300,500,1000]"
        @pagination="getList" />
    </div>
    <winning-dialog :id="id" :listId="listId" :pathType="pathType" v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible"
      @success="_handleSuccess" />
  </div>
</template>
<script>
import {
  jackpotList ,
  adminDict,
  deleteCustomer
} from '@/api/blindBox/activityDetail'
import winningDialog from './winningDialog' 
import { getToken } from "@/utils/auth";
export default {
  name: "shopDetail",
  components: {
    winningDialog
  },
  props: {
    id: String,
  },
  data() {
    return {
      currentNavtab: 0,
      dialogVisible: false,
      jackpotList:[],
      recordTypeList: [],
      total: 0,
      queryParams: {
        id: '',
        pageNum: 1,
        pageSize: 10,
        keyword: '',
        recordType: '',
      },
      listId: '',
      pathType: 'add',
      fileData: {
        activityId: '',
      },
      fileList: [],
      fileaction: process.env.VUE_APP_BASE_API + "/box/activity/jackpot/customer/import",
      headers: {
        "X-Access-Token": getToken(),
      }, //设置上传文件请求头
    };
  },
  watch: {
   
  },
  created() {
    this.queryParams.id = this.id
    this.fileData.activityId = this.id
    this.getList()
    this.getadminDict()
  },
  mounted() {
  
  },
  methods: {
    getadminDict() {
      //获取商户类型字典
      const params = {
        dictType: "jackpot_record_type",
      };
      adminDict(params).then((res) => {
        this.recordTypeList = res.result[0].dictList;
      });
    },
    /** 查询盲盒开奖名单*/
    getList() {
      this.loading = true;
      jackpotList(this.queryParams).then(response => {
        const {records ,total} = response.result
        console.log('response',response)
        this.jackpotList = records
        this.total = total
        this.loading = false;
      });
    },
    handleCustomerType(row){
      if(row.customerType == 1){
        return '虚拟用户'
      }else if(row.customerType == 2){
        return '实际用户'
      }
    },
    handleRecordType(row){
      if(row.recordType == 1){
        return '系统抽取'
      }else if(row.recordType == 2){
        return '手工录入'
      }
    },
    //添加开奖名单
    add(){
      this.dialogVisible = true
      this.pathType = 'add'
    },
    handleEdit(row){
      this.dialogVisible = true
      this.pathType = 'edit'
      this.listId = row.id
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm();
      this.$refs["queryForm"].resetFields();
      this.date = []
      console.log('this.queryParams', this.queryParams)
      this.handleQuery();
    },
    /* 删除 */
    handleDelete(id) {
      this.$confirm("是否删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          deleteCustomer(id).then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              this.getList();
            }, 800);
          });
        })
        .catch(() => {

        });
    },
    _handleSuccess(){
      this.getList()
    },
    //导入文件
    handleFileChange(res, file) {
      console.log('文件', res, file)
      if (res.code == 200) {
        this.$message.success('导入成功');
        this.getList()
        // this.ruleForm.phoneList = res.result
      } else {
        this.$message.error(res.message);
        
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.btnBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
